<template>
  <div>
    <!--  -->
    <van-nav-bar title="科室" left-text="返回" left-arrow @click-left="onClickLeft" />

    <!--  搜索框  -->
    <van-search v-model="value" placeholder="这里输入关键字搜索" @click="router.push('')" />

    <div class="flex">
      <RouterLink to="/RunningView">
        <div class="Specialists">
          <div class="Doctorimg"></div>
          <p>专科医生</p>
        </div>
      </RouterLink>
      <RouterLink to="/RunningView">
        <div class="Cough">
          <div class="Coughimg"></div>
          <p>专科医生</p>
        </div>
      </RouterLink>
    </div>
  </div>
</template>

<script setup>
import router from '@/router'
import { ref } from 'vue'

const onClickLeft = () => history.back()

const value = ref('')
</script>

<style lang="css">
/* 专科医生 */
.Specialists {
  width: 48%;
  height: 40vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6vw;
  position: relative;
}
.Specialists > p {
  color: black;
  position: absolute;
  bottom: 2vw;
  font-size: 4.7vw;
}
.Doctorimg {
  position: absolute;
  top: 3vw;
  width: 14vw;
  height: 14vw;
  background-image: url(../assets/icon/主治医师.png);
}

.Cough {
  width: 48%;
  height: 40vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6vw;
  position: relative;
}
.Cough > p {
  color: black;
  position: absolute;
  bottom: 2vw;
  font-size: 4.7vw;
}
.Coughimg {
  position: absolute;
  top: 3vw;
  width: 14vw;
  height: 14vw;
  background-image: url(../assets/icon/主治医师.png);
}
</style>
